<template>
	<view>
		<view class="details-container">
			<!-- 商品图片轮播 -->
			<view class="swiper-container">
				<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500" :circular="true">
					<swiper-item v-for="(img, index) in productData.imgs" :key="index">
						<image :src="img" mode="aspectFill" class="swiper-image"></image>
					</swiper-item>
				</swiper>
			</view>

			<!-- 商品信息 -->
			<view class="product-info">
				<text class="product-name">{{ productData.proname }}</text>
				<text class="product-price">¥{{ productData.originprice }}</text>
				<text class="product-discount" v-if="productData.discount">折扣: {{ productData.discount }}折</text>
				<text class="product-category">分类: {{ productData.category }}</text>
				<text class="product-brand">品牌: {{ productData.brand }}</text>
			</view>

			<!-- 商品描述 -->
			<view class="product-description">
				<text class="description-title">商品描述</text>
				<text class="description-content">{{ productData.desc }}</text>
			</view>

			<!-- 库存信息 -->
			<view class="product-stock">
				<text>库存: {{ productData.stock }}件</text>
			</view>
		</view>

		<view>
			<button>立即购买</button>
			<button @click="addCart()">加入购物车</button>
		</view>
	</view>
</template>

<script>
	import {
		ref
	} from 'vue';
	import {
		useUserStore
	} from '../../stores/user';
	export default {
		data() {
			return {
				productId: ref(''),
				productData: ref({}),
				token: ref(''),
				userId: ref('')
			}
		},
		onLoad(options) {
			const userStore = useUserStore();
			// this.userId = userStore.userInfo.userid;
			this.userId = uni.getStorageSync('userId');;
			console.log(this.userId);
			this.token = uni.getStorageSync('token');
			console.log(this.token);
			this.productId = options.productid;
			console.log(this.productId)
			this.getProductDetails();
		},
		methods: {
			//获取商品详情
			getProductDetails() {
				uni.request({
					url: `http://47.94.6.186:3001/api/pro/detail/${this.productId}`,
					method: 'GET'
				}).then(res => {
					console.log(res);
					this.productData = res.data.data;
					console.log(this.productData);
				})
			},
			//加入购物车
			addCart() {
				uni.request({
					url: 'http://47.94.6.186:3001/api/cart/add',
					method: 'POST',
					header: {
						'Content-type': 'application/json',
						token: this.token
					},
					data: {
						userid: this.userId,
						proid: this.productId,
						num: 1
					}
				}).then(res => {
					console.log(res)
				})
			}
		}
	}
</script>

<style>
	.details-container {
		padding: 10px;
	}

	.swiper-container {
		height: 300rpx;
		width: 100%;
	}

	.swiper-image {
		height: 100%;
		width: 100%;
	}

	.product-info {
		margin-top: 40rpx;
		padding: 10rpx;
		background-color: #fff;
		border-radius: 8rpx;
	}

	.product-name {
		font-size: 36rpx;
		font-weight: bold;
	}

	.product-price {
		font-size: 40rpx;
		color: #e64340;
		margin-top: 10rpx;
		display: block;
	}

	.product-discount {
		font-size: 28rpx;
		color: #ff9500;
		margin-top: 10rpx;
		display: block;
	}

	.product-category,
	.product-brand {
		font-size: 28rpx;
		color: #666;
		margin-top: 10rpx;
		display: block;
	}

	.product-description {
		margin-top: 20rpx;
		padding: 10rpx;
		background-color: #fff;
		border-radius: 8rpx;
	}

	.description-title {
		font-size: 32rpx;
		font-weight: bold;
		display: block;
	}

	.description-content {
		font-size: 28rpx;
		margin-top: 10rpx;
		display: block;
		white-space: pre-wrap;
	}

	.product-stock {
		margin-top: 20rpx;
		padding: 10rpx;
		background-color: #fff;
		border-radius: 8rpx;
		font-size: 28rpx;
	}
</style>